<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>新增素材</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<link rel="stylesheet" href="/fission/css/iconfont.css">
	<style type="text/css">
		body{
			background: #e9e9e9;
		}
		/*公共头部带搜索*/
		.public_container{
			margin: 20px;
			background: #fff;
		}
		.public_title_container{
			height: 54px;
			padding: 0 20px;
			font-size: 14px;
			display: flex;
			align-items: center;
			background: #f9f9f9;
			border-bottom: 1px solid #f0f0f0;
			justify-content: space-between;
		}
		.public_title_container a{
			fill: #999;
		}
		/*公共表单部分*/
		.public_form_container{
			padding: 20px 20px 40px 20px;
		}
		.public_form_content{
			padding: 24px 40px 24px 0;
			background: #fff;
			border: 1px solid #e9e9e9;
			margin-bottom: 8px;
		}
		.public_form_List{
			margin-bottom: 10px;
		}
		.public_form_List:last-child{
			margin-bottom: 0px;
		}
		.public_formTitle_container lable{
			font-size: 13px;
			font-weight: bold;
		}
		.service-card {
		  padding: 0 7px;
		  color: rgba(0,0,0,.65);
		  line-height: 28px;
		  font-size: 13px;
		  display: inline-block;
		  margin: 0 8px 0 5px;
		  -webkit-box-sizing: border-box;
		  box-sizing: border-box;
		  white-space: nowrap;
		  background: #fafafa;
		  border: 1px solid #e9e9e9;
		  border-radius: 4px;
		  position: relative;
		}
		.service-card i {
		  font-size: 14px;
		  display: inline-block;
		  color: #7da3d1;
		  margin-right: 2px;
		}
		.service-card .close {
		  position: absolute;
		  top: -13px;
		  right: -8px;
		  opacity: .6;
		  cursor: pointer;
		}
		.service-card .close:hover {
		  opacity: 1;
		}
	</style>
</head>
<body>
	<form class="layui-form" id="form1">
		

		<div class="public_container">
			<!-- /*公共头部带搜索*/ -->
			<div class="public_content">
				<div class="public_title_container">
					<p>新建模板</p>
					<a href="javascript:history.back(-1)">
						<svg t="1599462684269" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8055" width="20" height="20"><path d="M501.2992 273.408l1.024-156.16L184.65792 379.904l314.29632 266.1376 0.95232-149.2992c313.86624 42.5984 178.29888 231.3216-0.5632 410.2144 619.5712-404.3776 251.01312-590.6432 1.95584-633.5488z" p-id="8056"></path></svg>
					</a>
				</div>

			</div>
			<!-- /*公共头部带搜索*/ end -->
			<!-- 公共表单部分 -->
			<div class="public_form_container">
				<div class="public_form_content">
					<div class="public_form_List">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">发送方：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block" id="selectSendWay">
								<input type="radio" lay-filter="selectSendWay" name="selectSendWay" value="1" title="阿里云发送" checked>
								<input type="radio" lay-filter="selectSendWay" name="selectSendWay" value="2" title="系统发送">
							</div>
						</div>
					</div>
					<div class="public_form_List publicHide_content" id="" style="display: block;">

						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">任务名称：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<input type="text" name="name" id="name" value=""  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>
					</div>
					<div class="public_form_List publicHide_content" id="signNameDiv" style="display: block;">

						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">短信签名：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<input type="text" name="sign_name" id="sign_name" value=""  lay-verify="required" placeholder="请输入短信签名" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>
					</div>
					<div class="public_form_List publicHide_content" id="templateCodeDiv" style="display: block;">

						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">模板CODE：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<input type="text" name="template_code" id="template_code" value="" lay-verify="required" placeholder="请输入阿里云模板code" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>
					</div>
					<div class="public_form_List publicHide_content" id="contentDiv" style="display: none;">

						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">短信内容：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
								<!-- 	<input type="text" name="content" id="content" value="" placeholder="请输入短信内容" autocomplete="off" class="layui-input"> -->
									<textarea name="content" id="content" value="" class="layui-textarea"></textarea>
								</div>
							</div>
						</div>
					</div>
					<div class="public_form_List">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">接受号码：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block" id="sendObjectType">
								<input type="radio" lay-filter="sendObjectType" name="sendObjectType" value="1" title="导入接受号码文件" checked>
								<input type="radio" lay-filter="sendObjectType" name="sendObjectType" value="2" title="手动输入号码">
								<input type="radio" lay-filter="sendObjectType" name="sendObjectType" value="3" title="全部客户">
								<input type="radio" lay-filter="sendObjectType" name="sendObjectType" value="4" title="按标签">
								<input type="radio" lay-filter="sendObjectType" name="sendObjectType" value="5" title="按成员">
							</div>
						</div>
					</div>
					<div class="public_form_List publicHide_content" id="importPhoneFileDiv" style="display: block;">
						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label"></lable>
							</div>
							<div class="public_formOther_container">
								<div class="item" style="margin: 8px 0px;">
									<div class="item-block" style="">
										<span class="">
											<a href="download_excel.html" style="color: #1890ff;">下载导入模版</a>
										</span>
									</div>
								</div>
								<div class="layui-input-block">
									<span class="layui-btn layui-btn-primary" id="importPhoneFile">导入手机号</span>
									<span class="" style="margin-left: 10px;" id="file_name_show"></span>
								</div>
							</div>
							<input type="hidden" name="file_path" id="file_path" value=""/>
							<input type="hidden" name="file_name" id="file_name" value="" />
						</div>
					</div>
					<div class="public_form_List publicHide_content" id="manualInputPhoneDiv" style="display: none;">
						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">输入手机号</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<input type="text" name="ManualInputPhone" id="ManualInputPhone" value="" placeholder="多个手机号以 ',' 隔开,例:15575558555,13673645637" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>
					</div>
					<div class="public_form_List publicHide_content" id="selectTagDiv" style="display: none;">
						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label"></lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<span class="layui-btn layui-btn-primary" id="addLable">+ 添加标签</span>
								</div>
							</div>
							<input type="hidden" name="checkLable" id="checkLable"/>
							<div id="checkLableCon" style="margin-left: 108px;margin-top: 10px;">
								
							</div>
						</div>
					</div>
					<div class="public_form_List publicHide_content" id="selectUserDiv" style="display: none;">
						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label"></lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<span class="layui-btn layui-btn-primary" id="addPeople">+ 添加成员</span>
								</div>
							</div>
							<input type="hidden" name="checkUser" id="checkUser"/>
							<div style="margin-left: 108px;margin-top: 10px;" id="checkUserCon">
								
							</div>
						</div>
					</div>
					<div class="public_form_List publicHide_content" id="" style="display: block;">
						<div class="public_form_List"> 
							<div class="public_formTitle_container">
								<lable class="layui-form-label">设置定时：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<input type="checkbox" name="timedType" id="timedType" lay-filter="timedType" lay-skin="switch">
								</div>
							</div>
						</div>
					</div>
					<div class="public_form_List publicHide_content" id="timedTimeDiv" style="display: none;">
						<div class="public_form_List">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">发送时间：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<input type="text" name="timedTime" id="timedTime" value="" placeholder="请输入时间" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="button" class="layui-btn" lay-submit lay-filter="sendSms">提交并创建</button>
						<!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
					</div>
				</div>
			</div>
		</div>
	</form>
	<script src="/cdn/jquery.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/js/ajax.js"></script>
	<script type="text/javascript">
		// 日期
		layui.use('laydate', function(){
		  var laydate = layui.laydate;
		  
		  laydate.render({ 
		    elem: '#timedTime'
		    ,type: 'datetime'
		    ,min: 0
		    ,max: 7
		  });
		});
		// 弹窗
		layui.use('layer', function(){
		  var layer = layui.layer;
		}); 
		// 表单
		layui.use('form', function(){
		  var form = layui.form;
		  
		  //监听提交
		  form.on('submit(sendSms)', function(data){
		    //layer.msg(JSON.stringify(data.field));
		   // return false;
		   console.log(data);
		   if(data.field.sendObjectType == '1'){
		   		if(!data.field.file_path){
		   			layer.msg("请上传手机号");
		   			return false;
		   		}
		   }else if(data.field.sendObjectType == '2'){
		   		if(!data.field.ManualInputPhone){
		   			layer.msg("请输入手机号");
		   			return false;
		   		}
		   }else if(data.field.sendObjectType == '4'){
		   		if(!data.field.checkLable){
		   			layer.msg("请选择标签");
		   			return false;
		   		}
		   }else if(data.field.sendObjectType == '5'){
		   		if(!data.field.checkUser){
		   			layer.msg("请选择成员");
		   			return false;
		   		}
		   }
		   if(data.field.timedType){
		   		if(!data.field.timedTime){
		   			layer.msg('请选择发送时间');
		   			return false;
		   		}
		   }

			var formData = $('#form1').serialize();	
			myAjaxPost(false, true, 'add_sms_template.html', formData, function (resp) {
				console.log(resp);
				if (resp.status == 'success') {
					layer.msg(resp.msg);
					setTimeout(function(){
						location.href = 'index.html';
					},1000);
				}else{
					alert(resp.msg);
				}
			});
		  });
		  form.on('switch(timedType)', function(r){
		  	  if(r.elem.checked){
		  	  	$("#timedTimeDiv").show();
		  	  }else{
		  	  	$("#timedTimeDiv").hide();
		  	  }
		  });  
			form.on('radio(selectSendWay)', function (data) { 
		  		if (data.value == "1") {
		  			$("#templateCodeDiv").show();
		  			$("#template_code").attr('lay-verify','required');
		  			$("#contentDiv").hide();
		  			$("#content").removeAttr('lay-verify');
		  		} else if (data.value == "2") {
		  			$("#templateCodeDiv").hide();
		  			$("#template_code").removeAttr('lay-verify');
		  			$("#contentDiv").show();
		  			$("#content").attr('lay-verify','required');
		  		}
                
                form.render();
	        });
		  	form.on('radio(sendObjectType)', function (data) { 
		  		if (data.value == "1") {
		  			$("#importPhoneFileDiv").show();
		  			$("#manualInputPhoneDiv").hide();
		  			$("#selectTagDiv").hide();
		  			$("#selectUserDiv").hide();
		  		} else if (data.value == "2") {
		  			$("#importPhoneFileDiv").hide();
		  			$("#manualInputPhoneDiv").show();
		  			$("#selectTagDiv").hide();
		  			$("#selectUserDiv").hide();
		  		} else if (data.value == "3") {
					$("#importPhoneFileDiv").hide();
		  			$("#manualInputPhoneDiv").hide();
		  			$("#selectTagDiv").hide();
		  			$("#selectUserDiv").hide();
		  		} else if (data.value == "4") {
		  			$("#importPhoneFileDiv").hide();
		  			$("#manualInputPhoneDiv").hide();
		  			$("#selectTagDiv").show();
		  			$("#selectUserDiv").hide();
		  		} else if (data.value == "5") {
		  			$("#importPhoneFileDiv").hide();
		  			$("#manualInputPhoneDiv").hide();
		  			$("#selectTagDiv").hide();
		  			$("#selectUserDiv").show();
		  		}
                
                form.render();
            });
		});
	</script>
	<script type="text/javascript">
		$('#addLable').on('click',function(){
			layer.open({
			  type: 2,
			  title: '请选择标签',
			  shadeClose: true,
			  shade: 0.2,
			  area: ['700px', '530px'],
			  content: 'select_tag.html'
			}); 
		})
		$('#addPeople').on('click',function(){
			layer.open({
			  type: 2,
			  title: '请选择使用人员',
			  shadeClose: true,
			  shade: 0.2,
			  area: ['700px', '530px'],
			  content: 'select_user.html'
			}); 
		})
		// 上传
		layui.use('upload', function(){
		  var upload = layui.upload;
		   
		  //执行实例
		  var uploadInst = upload.render({
			 accept: 'file'
			,field: 'file'
		    ,elem: '#importPhoneFile' //绑定元素
		    ,url: 'upload_file.html' //上传接口
		    ,done: function(res){
		      //上传完毕回调
			  layer.msg(res.msg);
			  if(res.status == 'success'){
				  $('#file_path').val(res.data.filePath);
			      $('#file_name').val(res.data.fileName);
			      $('#file_name_show').html(res.data.fileName);
			  }
		    }
		    ,error: function(){
		      //请求异常回调
		    }
		  });
		});
	</script>
</body>
</html>